<template>
  <div class="import-container">
    <div class="app-container">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <div slot="header">
          <span>批量导入员工</span>
        </div>
        <!-- excel导入文件 -->
        <UploadExcel
          :before-upload="beforeUpload"
          :on-success="handleSuccess"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
// excel 格式时间
import { formatExcelDate } from '../../utils/index'
// 导入excel批量添加员工 api
import { importEmployees } from '@/api/employees'
export default {
  name: 'Import',
  methods: {
    // 导入之前做校验  可以校验excel文件体积和格式  校验 格式+大小
    beforeUpload (file) {
      console.log('上传之前校验', file)
      // 必须返回true才会继续执行 小于l mb 可以上传
      // const isLt1M = file.size / 1024 / 1024 < 1

      // if (isLt1M) {
      //   return true
      // }
      return true
    },
    // 校验通过后执行 批量添加员工
    async handleSuccess ({ header, results }) {
      console.log(this.TransformResults(results), '我是英文')
      // 调用接口
      await importEmployees(this.TransformResults(results))
      // 提示
      this.$message.success('添加员工成功')
      // 回到主页面
      this.$router.back()
    },
    // 专换员工读取中文属性
    TransformResults (results) {
      // 根据读取的数据 设置中文 key 对应后台的key
      const zhToen = {
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      // 循环外层数组 => 中文key的员工数据 { 姓名 : '张三'}
      // 循环数组里层 =>  中文kye => 英文 key
      const newArr = []
      results.forEach(item => {
        const newItem = {}
        // 循环遍历对象
        for (const zhKey in item) {
          // 获取英文 enkey
          const enKey = zhToen[zhKey]
          // 处理事件 excel 时间问题
          if (enKey === 'timeOfEntry' || enKey === 'correctionTime') {
            newItem[enKey] = formatExcelDate(item[zhKey], '-')
          } else {
            // 放到新对象上
            newItem[enKey] = item[zhKey]
          }
        }
        // 往新数组添加
        newArr.push(newItem)
      })
      // 返回数组
      return newArr
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
